<template>
  <div class="tank-item">
    <div class="header">
      <p class="tank-title">{{ info.stationName }}</p>
      <!-- <el-link type="primary" :underline="false" @click="clickFn('records')">进油记录</el-link> -->
    </div>
    <div class="body">
      <p class="high">{{ info.highWarningValue }}</p>
      <p class="low">{{ info.lowWarningValue }}</p>
      <div :id="'tank' + info.id" style="height: 86px; width: 100px"></div>
      <div style="margin-left: 48px">
        <p class="tank-name">{{ info.tankNo }}号罐</p>
        <p class="tag">{{ info.prStandard || '--' }}，{{ info.prName || '--' }}</p>
        <p class="value">{{ info.oilVolume || 0 }}L</p>
      </div>
      <div style="position:absolute;right:0;bottom:0;height:24px;font-size:12px;">
        <span v-if="info.dataStatus==1">无罐容表/罐容表数据异常</span>
        <span v-if="info.dataStatus==2">探棒不在线</span>
        <span v-if="info.dataStatus==3">控制板不在线</span>
      </div>
    </div>


  </div>
</template>

<script>
  import * as echarts from 'echarts';
  export default {
    components: {

    },
    name: 'tankItem',
    props: {
      info: {
        type: Object,
        default: () => {}
      },
      prList: Array,
      isIndex: {
        type: Boolean,
        default: false
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.createTankCanvas()
      })
    },
    methods: {
      clickFn(methodType) {
        this.$refs[methodType].open(this.info)
      },
      onSuccess() {
        this.$emit('on-success')
      },
      createTankCanvas() {
        const myChart = echarts.init(document.getElementById('tank' + this.info.id));
        const markLineSetting = {
          symbol: 'none',
          lineStyle: {
            opacity: 0.3
          },
          data: [{
              yAxis: this.info.highWarningValue,
              label: {
                formatter: '{c}'
              }
            },
            {
              yAxis: this.info.lowWarningValue,
              label: {
                formatter: '{c}'
              }
            }
          ]
        };
        const option = {
          yAxis: {
            max: this.info.tankCapacity,
            offset: 20,
            splitLine: {
              show: false
            }
          },
          xAxis: {
            data: ['a'],
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            show: false
          },
          grid: {
            top: 'center',
            height: 100,
            width: '90%',
            left: -15,
            top: -15,
            bottom: 2
          },
          // markLine: {
          //   z: -100
          // },
          series: [{
              name: 'a',
              type: 'pictorialBar',
              symbolClip: true,
              symbolBoundingData: this.info.tankCapacity,
              // markLine: markLineSetting,
              z: 10,
              data: [{
                value: this.info.oilVolume,
                color: (this.info.oilVolume > this.info.highWarningValue || this.info.oilVolume < this.info
                  .lowWarningValue) ? '#FF4A54' : '#448FFF',
                symbolSize: ['90%', '80%'],
                symbol: 'path://M30,0 C44.4294439,0 60,3.08333681 60,9.89812076 C60,11.7654486 58.6949534,13.3857244 56.5766635,14.7653652 L56.5766635,33.5894412 C58.6949534,34.969082 60,36.5925664 60,38.5401058 C60,40.4876453 58.6949534,42.1111296 56.5766635,43.4073503 L56.5766635,62.3148465 C58.6949534,63.6142756 60,65.2345514 60,67.1820909 C60,73.9166632 44.5098039,77 30,77 C15.5705561,77 0,73.9166632 0,67.1820909 C0,65.3147631 1.30504661,63.6110671 3.42333655,62.3148465 L3.42333655,43.4073503 C1.30504661,42.1079212 0,40.4876453 0,38.5401058 C0,36.672778 1.30504661,34.969082 3.42333655,33.6728614 L3.42333655,14.6851535 C1.30504661,13.3857244 0,11.7654486 0,9.81790908 C0,3.08333681 15.5705561,0 30,0 Z M30,31.2374211 C29.0377274,31.226919 28.1400984,31.7199471 27.6342012,32.537064 C25.8405657,35.456769 19.9710704,45.5185216 19.9710704,49.9814992 C19.9710704,55.5000625 24.4551591,59.9630401 30,59.9630401 C35.5448409,59.9630401 40.0289296,55.5000625 40.0289296,49.9814992 C40.0289296,45.5987333 34.1594343,35.5369807 32.3657988,32.537064 C31.8608117,31.7189923 30.9625937,31.2256406 30,31.2374211 Z M25.6798457,43.6544023 C26.0880746,43.0062919 26.9013179,42.8426601 27.5538412,43.2501354 C28.2063645,43.6576107 28.450659,44.4661444 27.9620701,45.1174632 C27.9620701,45.1976749 25.1912568,49.5804409 27.2291868,52.583566 C27.4268171,52.8841814 27.494908,53.251544 27.4181095,53.6028374 C27.3413109,53.9541308 27.1260874,54.2597846 26.8209579,54.4508938 C26.6069158,54.6041382 26.3514249,54.6891446 26.0880746,54.6947373 C25.6238921,54.6797845 25.1969584,54.4373017 24.9469624,54.0466269 C21.9318547,49.5836493 25.5191257,43.9046627 25.6798457,43.6608192 L25.6798457,43.6544023 Z M30,4.62340098 C14.9983928,4.62340098 5.86949534,7.95058127 4.72838316,9.81790908 C5.86949534,11.7654486 15.0016072,15.0124172 30,15.0124172 C44.9983928,15.0124172 54.1305047,11.7654486 55.2716168,9.81790908 C54.1305047,7.8703696 44.9983928,4.62340098 30,4.62340098 Z M18.1774349,8.03079295 C20.8775313,8.03079295 23.0697525,8.82970124 23.0697525,9.81470061 C23.0697525,10.7997 20.8807457,11.5986083 18.1774349,11.5986083 C15.4773385,11.5986083 13.2851173,10.7997 13.2851173,9.81470061 C13.2851173,8.82970124 15.4741241,8.03079295 18.1774349,8.03079295 Z'
              }, ],
              itemStyle: {
                color: (this.info.oilVolume > this.info.highWarningValue || this.info.oilVolume < this.info
                  .lowWarningValue) ? '#FF4A54' : '#448FFF'
              }
            },
            {
              name: 'full',
              type: 'pictorialBar',
              symbolBoundingData: this.info.tankCapacity,
              animationDuration: 0,
              itemStyle: {
                color: '#ccc'
              },
              data: [{
                value: this.info.tankCapacity,
                color: (this.info.oilVolume > this.info.highWarningValue || this.info.oilVolume < this.info
                  .lowWarningValue) ? '#FF4A54' : '#448FFF',
                symbolSize: ['90%', '80%'],
                symbol: 'path://M30,0 C44.4294439,0 60,3.08333681 60,9.89812076 C60,11.7654486 58.6949534,13.3857244 56.5766635,14.7653652 L56.5766635,33.5894412 C58.6949534,34.969082 60,36.5925664 60,38.5401058 C60,40.4876453 58.6949534,42.1111296 56.5766635,43.4073503 L56.5766635,62.3148465 C58.6949534,63.6142756 60,65.2345514 60,67.1820909 C60,73.9166632 44.5098039,77 30,77 C15.5705561,77 0,73.9166632 0,67.1820909 C0,65.3147631 1.30504661,63.6110671 3.42333655,62.3148465 L3.42333655,43.4073503 C1.30504661,42.1079212 0,40.4876453 0,38.5401058 C0,36.672778 1.30504661,34.969082 3.42333655,33.6728614 L3.42333655,14.6851535 C1.30504661,13.3857244 0,11.7654486 0,9.81790908 C0,3.08333681 15.5705561,0 30,0 Z M30,31.2374211 C29.0377274,31.226919 28.1400984,31.7199471 27.6342012,32.537064 C25.8405657,35.456769 19.9710704,45.5185216 19.9710704,49.9814992 C19.9710704,55.5000625 24.4551591,59.9630401 30,59.9630401 C35.5448409,59.9630401 40.0289296,55.5000625 40.0289296,49.9814992 C40.0289296,45.5987333 34.1594343,35.5369807 32.3657988,32.537064 C31.8608117,31.7189923 30.9625937,31.2256406 30,31.2374211 Z M25.6798457,43.6544023 C26.0880746,43.0062919 26.9013179,42.8426601 27.5538412,43.2501354 C28.2063645,43.6576107 28.450659,44.4661444 27.9620701,45.1174632 C27.9620701,45.1976749 25.1912568,49.5804409 27.2291868,52.583566 C27.4268171,52.8841814 27.494908,53.251544 27.4181095,53.6028374 C27.3413109,53.9541308 27.1260874,54.2597846 26.8209579,54.4508938 C26.6069158,54.6041382 26.3514249,54.6891446 26.0880746,54.6947373 C25.6238921,54.6797845 25.1969584,54.4373017 24.9469624,54.0466269 C21.9318547,49.5836493 25.5191257,43.9046627 25.6798457,43.6608192 L25.6798457,43.6544023 Z M30,4.62340098 C14.9983928,4.62340098 5.86949534,7.95058127 4.72838316,9.81790908 C5.86949534,11.7654486 15.0016072,15.0124172 30,15.0124172 C44.9983928,15.0124172 54.1305047,11.7654486 55.2716168,9.81790908 C54.1305047,7.8703696 44.9983928,4.62340098 30,4.62340098 Z M18.1774349,8.03079295 C20.8775313,8.03079295 23.0697525,8.82970124 23.0697525,9.81470061 C23.0697525,10.7997 20.8807457,11.5986083 18.1774349,11.5986083 C15.4773385,11.5986083 13.2851173,10.7997 13.2851173,9.81470061 C13.2851173,8.82970124 15.4741241,8.03079295 18.1774349,8.03079295 Z'
              }, ]
            }
          ]
        }
        myChart.setOption(option)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .tank-item {
    padding: 14px 16px;
    background: #fff;
    width: 100%;
    box-sizing: border-box;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .tank-title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #000000;
        line-height: 14px;
        text-align: left;
        font-style: normal;
      }
    }

    .body {
      display: flex;
      position: relative;

      .high {
        position: absolute;
        left: 0;
        top: 17px;
        font-size: 12px;
        color: #c1c0c0;
      }

      .high::before {
        display: inline-block;
        content: '';
        width: 80px;
        border-top: 1px dashed #ccc;
        position: relative;
        top: -3px;
      }

      .low {
        position: absolute;
        left: 0;
        top: 60px;
        font-size: 12px;
        color: #c1c0c0;
      }

      .low::before {
        display: inline-block;
        content: '';
        width: 80px;
        border-top: 1px dashed #ccc;
        position: relative;
        top: -3px;
      }

      .tank-name {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #000000;
        line-height: 16px;
        font-style: normal;
      }

      .tag {
        border-radius: 2px;
        padding: 3px 4px;
        background: (68, 143, 255, 0.1);
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #448FFF;
        line-height: 12px;
        font-style: normal;
        margin-top: 9px;
        margin-bottom: 11px;
      }

      .value {
        font-family: DINAlternate, DINAlternate;
        font-weight: bold;
        font-size: 20px;
        color: #FF4A54;
        line-height: 20px;
        font-style: normal;
      }
    }

    .footer {
      padding-top: 16px;
      border-top: 1px solid #ccc;
      margin-top: 22px;
      display: flex;
      justify-content: space-between;
    }
  }
</style>
